<template>
 <div>

  <el-dialog
  :title="type=='edit' ? '修改' : '新增'"
  @close="close"
  @open="open"
  :visible.sync="dialogFlag"
  width="30%"
  >
    <el-form :model="form" ref="dialogForm">
    <el-form-item label="分类名称" prop="name">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="close">取 消</el-button>
    <el-button type="primary" @click="submitCategory">确 定</el-button>
  </div>

</el-dialog>


 </div>
</template>

<script>
 export default {
   name: 'CategoryDialog',
   props: {
       flag:{
           type:Boolean,
           default:false
       },

       pData:{
         type:Object,
         default:{}
       }
   },
   components: {

   },
   data () {
     return {
         //弹窗状态
         dialogFlag:false,
         //数据
         form:{},
         //选择的节点信息
         selectNode:{},
         //弹窗处理方式add或edit
         type:'',
     }
   },
   methods: {
     //打开弹窗
     open(){
       if(this.type=='edit'){
         let data = this.selectNode.data;
         this.form = {
           name:data.name
         }
       }else{
         this.form = {};
       }
      
     },
     //关闭弹窗
      close(){
        this.$emit("close",false);
        //  this.$emit("sonData",{});
      },
      
      //提交按钮触发
      submitCategory(){
        if(this.form.name == ""){
          this.close;
          return;
        }

        if(this.type=='add'){
          this.addCategory();
        }else{
          this.editCategory();
        }
      },

      //直接先加入节点，无需发送请求
      addOrUpdateNode(id){
        let data = this.selectNode.data;
        let newChild = { catId: id, name: this.form.name, catLevel:data.catLevel+1, children: [] };        
        data.children.push(newChild);
      },

      //请求新增数据节点
      addCategory(){
        this.form.parentCid = this.selectNode.data.catId;
        this.form.catLevel = this.selectNode.data.catLevel+1;
        this.$http({
              url: this.$http.adornUrl('/product/category/save'),
              method: 'post',
              data:this.form
          }).then(result=>{
            let {code,id} = result.data;
            if(code == 0){
              //给出提示
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.addOrUpdateNode(id);
              this.$emit("sonData",this.form);
            }
          }).catch(()=>{})
          this.close();
        },

        //发送请求修改数据
        editCategory(){
          this.form.catId = this.selectNode.data.catId;

          this.$http({
              url: this.$http.adornUrl('/product/category/update'),
              method: 'post',
              data:this.form
          }).then(result=>{
            let {code,id} = result.data;
            if(code == 0){
              //给出提示
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              
              this.selectNode.data.name=this.form.name;
              this.$emit("sonData",this.form);
            }
          }).catch(()=>{})

          this.close();
        }
   },
   mounted() {

   },
   watch: {
       flag:{
           handler(newVal, oldVal){
               this.dialogFlag = newVal;
           }
       },

      pData:{
        handler(newVal, oldVal){
          this.selectNode = newVal.node;
          this.type = newVal.type;
        }
      }

   },
   computed: {

   },
   filters: {

   }
 }
</script>

<style scoped lang='scss'>

</style>